<template>
  <div class="tab-footer">
    <div class="tabbar show-tabbar" role="tablist" style="bottom: 0px;">
      <!---->
      <div class="tab-list">
        <a class="tab-button" :class="{'active-button' : active_index == 0}"  @click="clickTab(0)">
          <i class="tab-button-icon  icon-nav-home"></i>
          <span class="tab-button-text">首页</span>
          <div class="home-button-effect"></div>
        </a>

      </div>
      <div class="tab-list">
        <a class="tab-button" :class="{'active-button' : active_index == 1}"  @click="clickTab(1)">
          <i class="tab-button-icon  icon-nav-repay"></i>
          <span class="tab-button-text">还款</span>
          <div class="repay-button-effect"></div>
        </a>

      </div>
      <div class="tab-list">
        <a class="tab-button" :class="{'active-button' : active_index == 2}"  @click="clickTab(2)">
          <i class="tab-button-icon  icon-nav-my"></i>
          <span class="tab-button-text">我的</span>
        </a>
        <div class="my-button-effect">
          <a class="to-complete-img icon-complete-info" id="complete-info" style="display: none;" href="/user/account/setUser">

          </a>
        </div>

      </div>
      <div class="tab-highlight"></div>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'tabBar',
    props : [
        "active_index"
    ],
    data () {
      return {
      //  active_index : 0, //0 主页  1 还款 2 我的
      //  msg: 'Welcome to Your Vue.js App'
      }
    },
    methods : {
      clickTab(idx){
         if(this.active_index == idx)
             return;
         let route_name = '';
         switch (idx){
           case 0 :route_name = '/';break;
           case 1 :route_name = '/repay';break;
           case 2 :route_name = '/my';break;
           default: route_name = '/' ;break;
         }
         this.$router.push(route_name);
      }
    }
  }
</script>

<style scoped>

</style>
